<template>
  <div class="leftTabs">
    <div class="component-container" :class="{ 'collapsed': !leftPanel }">
      <div v-show="tabsShow" class="head-switch-button-group">
        <span class="button" :class="{ 'selected': currentTab === 'canvas', 'disabled': viewVersion }"
          @click="!viewVersion && tabChange('canvas')">算子面板</span>
        <span class="button" :class="{ 'selected': currentTab === 'version', 'disabled': !templateId }"
          @click="templateId && tabChange('version')">历史版本</span>
      </div>
      <div v-show="tabsShow" class="tab-group">
        <ComponentTab v-show="currentTab === 'canvas'" />
        <historical-version v-if="versionView" v-show="currentTab === 'version'" :current-tab="currentTab" />
      </div>
      <el-tooltip class="item" effect="dark" :content="(leftPanel ? '收起' : '展开') + ' (Ctrl+Alt+Q)'" placement="right">
        <div class="collapse-btn" :class="{ 'collapsed': !leftPanel }" @click="updateCollapsed" />
      </el-tooltip>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed, shallowRef, onMounted, watch, nextTick } from "vue";
import ComponentTab from '../componentTab.vue'
import { designerStore } from 'src/stores/designerTool/designerTool'
import Mousetrap from 'mousetrap'
import HistoricalVersion from '../historicalVersion.vue'
const currentTab = ref('')
const tabsShow = ref(true)
const versionView = ref(false)
const leftPanel = ref(true)
const store = designerStore()

const templateId = computed(() => {
  return store.workflowInfo ? store.workflowInfo.template_id : ''
})
const viewVersion = computed(() => {
  // return !!store.versionId || !!workflowVersionId.value
  return !!store.versionId
})

const viewExperiment = computed(() => {
  return !!store.experimentId || !!store.flowReadonlyId
})
watch(() => store.leftPanel, (newData, olddata) => {
  leftPanel.value=newData
  tabsShow.value=newData
  // setTimeout(() => {
  //   tabsShow.value = newData
  // }, 100)
}
)
watch(() => store.events.initEvent.index, (newData, olddata) => {
  initEvent()
})
watch(() => store.events.setLeftTabCanvas.index, (newData, olddata) => {
  tabChange('canvas')
})
// const workflowVersionId = computed(() => {
//   return this.$route.params.workflowVersionId
// })
onMounted(() => {
  // if (workflowVersionId.value) {
  //   tabChange('version')
  // }
  // tabChange('version')
  nextTick(() => {
    currentTab.value = 'canvas'
  })
})

function initEvent() {
  if (!viewExperiment.value) {
    Mousetrap.bind('ctrl+alt+q', () => {
      updateCollapsed()
      return false
    })
  }
}

function tabChange(tab: string) {
  if (tab === 'version') {
    versionView.value = true
  }
  currentTab.value = tab
}
function updateCollapsed() {
  designerStore().SET_LEFT_PANEL(!store.leftPanel)

}
</script>

<style lang="scss" scoped>
@import "src/css/designerStyles/index.scss";

.leftTabs {
  display: flex;

  .tab-container {
    width: 72px;
    border-right: 1px solid #dcdee2;

    .tab-item {
      width: 100%;
      color: #717880;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px 0;
      border-left: 2px solid transparent;
      cursor: pointer;
      transition: all 0.3s ease;

      .svg-icon {
        margin-bottom: 8px;
        fill: #717880;
        width: 1.2em;
        height: 1.2em;
      }
    }
  }

  .component-container {
    width: 230px;
    transition: all 0.3s ease;
    position: relative;
    border-right: 1px solid #dcdee2;

    &.collapsed {
      width: 0;
      border-right: 0;

      .data-source-tab,
      .catalogueTab,
      .file-tree-tab,
      .operatorTab {
        visibility: hidden;
      }
    }

    .head-switch-button-group {
      height: 36px;
      border-bottom: 1px solid #dcdee2;
      display: flex;
      align-items: center;

      .button {
        flex: 1;
        text-align: center;
        height: 100%;
        line-height: 37px;
        cursor: pointer;

        &.selected {
          color: #fff;
          background-color: $--color-blue;
          border-color: $--color-blue;
        }

        &:hover {
          color: $--color-blue;
          border-color: #c6e2ff;
          background-color: #ecf5ff
        }

        &:first-child {
          border-right: 1px solid #dcdee2;
        }

        &.disabled {
          cursor: not-allowed;
          color: #909399;
          background: #f4f4f5;
          border-color: #d3d4d6;
        }
      }
    }

    .tab-group {
      height: calc(100% - 36px);
    }

    .collapse-btn {
      background-image: url();
      transform: rotateY(180deg);
      width: 14px;
      height: 35px;
      position: absolute;
      top: calc(50% + 18px);
      right: 0;
      cursor: pointer
    }

    .collapse-btn.collapsed {
      background-image: url();
      right: -14px;
      z-index: 102;
      transform: rotateY(0deg);
    }
  }
}
</style>
